NOTICE: By continued use of this site you understand and agree to the binding Terms of Service and Privacy Policy.
// ==UserScript== // @name IMDB Large Images [fork] // @version 1.0.11-joey7 // @description Large iMDB images when you hover over them. // @namespace https://greasyfork.org/en/scripts/11249-imdb-large-images // @homepage https://greasyfork.org/en/scripts/11249-imdb-large-images // @license ISC // @contributors joeytwiddle // @match http://imdb.com/* // @match https://imdb.com/* // @match http://*.imdb.com/* // @match https://*.imdb.com/* // @icon data:image/png;base64,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 // @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js // @grant none // ==/UserScript== this.$ = this.jQuery = jQuery.noConflict(true); /*! * hoverIntent v1.8.0 // 2014.06.29 // jQuery v1.9.1+ * http://cherne.net/brian/resources/jquery.hoverIntent.html * * You may use hoverIntent under the terms of the MIT license. Basically that * means you are free to use hoverIntent as long as this header is left intact. * Copyright 2007, 2014 Brian Cherne */ (function($){$.fn.hoverIntent=function(handlerIn,handlerOut,selector){var cfg={interval:100,sensitivity:6,timeout:0};if(typeof handlerIn==="object"){cfg=$.extend(cfg,handlerIn)}else{if($.isFunction(handlerOut)){cfg=$.extend(cfg,{over:handlerIn,out:handlerOut,selector:selector})}else{cfg=$.extend(cfg,{over:handlerIn,out:handlerIn,selector:handlerOut})}}var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if(Math.sqrt((pX-cX)*(pX-cX)+(pY-cY)*(pY-cY))<cfg.sensitivity){$(ob).off("mousemove.hoverIntent",track);ob.hoverIntent_s=true;return cfg.over.apply(ob,[ev])}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob)},cfg.interval)}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=false;return cfg.out.apply(ob,[ev])};var handleHover=function(e){var ev=$.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t)}if(e.type==="mouseenter"){pX=ev.pageX;pY=ev.pageY;$(ob).on("mousemove.hoverIntent",track);if(!ob.hoverIntent_s){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob)},cfg.interval)}}else{$(ob).off("mousemove.hoverIntent",track);if(ob.hoverIntent_s){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob)},cfg.timeout)}}};return this.on({"mouseenter.hoverIntent":handleHover,"mouseleave.hoverIntent":handleHover},cfg.selector)}})(jQuery); $(document).ready(function() { var cssCode = "\ #largeImagePopover { \ position: absolute; \ box-shadow: 0 0 80px #0009; \ cursor: pointer; \ z-index: 1000; \ } \ "; var styleElement = document.createElement("style"); styleElement.type = "text/css"; if (styleElement.styleSheet) { styleElement.styleSheet.cssText = cssCode; } else { styleElement.appendChild(document.createTextNode(cssCode)); } document.getElementsByTagName("head")[0].appendChild(styleElement); var hoverInFunction = function (e) { var mouseX = e.pageX; var mouseY = e.pageY; //console.log("[imdb_large_images.user.js] Hover detected", mouseX, mouseY); var hoveredImage = this.src ? this : $(this).find('img').get(0) || $(this).closest('.ipc-avatar, .ipc-photo, .ipc-poster').find('img').get(0); hoveredImage.style.cursor = 'progress'; $('div#largeImagePopover, div.largeImagePopover').remove(); $("body").css("overflow", "auto"); // setup the large image var popImage = document.createElement("img"); var src = hoveredImage.src; src = src.replace(/_V1\.?.*?_\./g,"_V1_."); src = src.replace(/_V1_?\.jpg/,"_V1_SY"+window.innerHeight+"_.jpg"); popImage.src = src popImage.alt = hoveredImage.alt; popImage.border = 0; // setup the image link var popLink = document.createElement("a"); popLink.href = $(hoveredImage).parents('a').attr('href'); popLink.appendChild(popImage); // setup the image div var popDiv = document.createElement("div"); popDiv.id = 'largeImagePopover'; popDiv['class'] = 'largeImagePopover'; popDiv.appendChild(popLink); $(popDiv).hide(); // attach events to new image $(popImage).mouseout( function() { $(popDiv).remove(); }); $(popImage).mousemove( function(e) { var distX = e.pageX - mouseX; var distY = e.pageY - mouseY; var dist = Math.sqrt(distX * distX + distY * distY); //console.log("[imdb_large_images.user.js] Motion detected", dist); if (dist > 25) { $(popDiv).remove(); } }); $(popImage).css('cursor','crosshair'); $(popImage).load( function() { // these assignments may differ per browser var pageXOffset = window.pageXOffset; var pageYOffset = window.pageYOffset; var innerWidth = window.innerWidth; var innerHeight = window.innerHeight; // shrink image if wider than screen if(popImage.width > innerWidth-17) { var tmpW = popImage.width; popImage.width = Math.min(popImage.width,innerWidth-17); popImage.height = (popImage.width/tmpW) * popImage.height; } if(popImage.height > innerHeight) { var tmpH = popImage.height; popImage.height = Math.min(popImage.height,innerHeight); popImage.width = (popImage.height/tmpH) * popImage.width; } // center image on mouse cursor var x = mouseX - parseInt(popImage.width/2); var y = mouseY - parseInt(popImage.height/2); // move image down and right if off screen to the left or top x = Math.max(x,pageXOffset); y = Math.max(y,pageYOffset); // move image up or left if off screen to the right or bottom x = Math.min(x, pageXOffset + innerWidth - 17 - popImage.width); y = Math.min(y, pageYOffset + innerHeight - popImage.height); // move image down and right if off screen to the left or top x = Math.max(x,pageXOffset); y = Math.max(y,pageYOffset); $(popImage.parentNode.parentNode).css('left',x); $(popImage.parentNode.parentNode).css('top',y); $(popImage.parentNode.parentNode).show(); // For some reason the <div> is 5 pixels taller than the image, which leaves a little transparent box below the image, before the shadow starts // To prevent that, we force the desired size of the <div> $(popImage.parentNode.parentNode).css({ width: popImage.width, height: popImage.height }); hoveredImage.style.cursor = 'crosshair'; }); $('body').append($(popDiv)); }; $(document).keyup(function(e) { if (e.keyCode == 27) { $('div#largeImagePopover, div.largeImagePopover').remove(); } }); function checkImages() { $("img[src*='_V1']").not("img[src*='_ZA']").not(".imageDone").each(function() { // For thumbnails in the recommended "More Like This" section, we need to give IMDB time to select the item and show the overview, before we overlay the large image. var interval = $(this).closest('.rec_item').length ? 300 : 100; // The 2021 layout introduced a separate `a.ipc-lockup-overlay` which blocks focus of the img // We could target the `.ipc-avatar` container but targetting the overlay itself makes the crosshair appear how we expect //var target = $(this).closest('.ipc-avatar')[0] || this; var target = findOverlayFor(this, '.ipc-avatar') || findOverlayFor(this, '.ipc-photo') || findOverlayFor(this, '.ipc-poster') || this; $(target).addClass('imageDone').css('cursor','crosshair').hoverIntent({ over: hoverInFunction, interval: interval }); }); window.setTimeout(checkImages, 1000); } function findOverlayFor(img, className) { return $(img).closest(className).find('a.ipc-lockup-overlay')[0]; } checkImages(); });